<template>
	<view :class="model+'-wrap'" class="flex flex-column">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<view class="mx-6 topIcon flex justify-end">
				<image @click="$tool.goBack()" :src="'/static/images/cha_'+model+'.png'" mode=""></image>
			</view>
		</view>
		<view class="h176">

		</view>
		<view class="flex-1 flex align-center flex-column justify-between">
			<view class="title A-Medium" :class="model=='light'?'titleLight':''">
				{{i18n.m099}}
			</view>
			<view class="passWrap flex align-center justify-between" :class="model=='light'?'passWrapLight':''">
				<view v-for="(item,index) in passArr" class="flex align-center justify-center empty"
					:class="item!=''?'unEmpty':''">
					<view>

					</view>
				</view>
			</view>
			<view class="inputWrap flex flex-wrap justify-between" :class="model=='light'?'inputWrapLight':''">
				<view @click="clickNum(1)" class="num A-Bold">
					1
				</view>
				<view @click="clickNum(2)" class="num mx-8 A-Bold">
					2
				</view>
				<view @click="clickNum(3)" class="num A-Bold">
					3
				</view>
				<view @click="clickNum(4)" class="num A-Bold">
					4
				</view>
				<view @click="clickNum(5)" class="num mx-8 A-Bold">
					5
				</view>
				<view @click="clickNum(6)" class="num A-Bold">
					6
				</view>
				<view @click="clickNum(7)" class="num A-Bold">
					7
				</view>
				<view @click="clickNum(8)" class="num mx-8 A-Bold">
					8
				</view>
				<view @click="clickNum(9)" class="num A-Bold">
					9
				</view>
				<view class="nums borderNO mb-0 bgNo">

				</view>
				<view @click="clickNum(0)" class="num mb-0 A-Bold">
					0
				</view>
				<view @click="clickNum(-1)" class="nums borderNO mb-0 del A-Regular bgNo">
					{{i18n.m079}}
				</view>
			</view>
		</view>
		<view class="h198">

		</view>
	</view>
</template>

<script>
	import {
		checkCapitalPassword
	} from '@/core/api/user.js';
	export default {
		data() {
			return {
				passArr: ['', '', '', '', '', ''],
				passIndex: 0,
				type:-1,//2现货秒交易
			}
		},
		onLoad(options) {
			if(options.type){
				this.type = options.type;
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			i18n2() {
				return this.$t('showToast');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		methods: {
			clickNum(e) {
				let index = this.passArr.join('').length;
				if (e == -1) {
					if(index!=0){
						this.passArr[index - 1] = '';
					}
				} else {
					if(index!=6){
						this.passArr[index] = e;
					}
				}
				if(index==5){
					this.$tool.showLoading();
					checkCapitalPassword({
						capitalPassword:this.passArr.join(''),
						mobileUserId:uni.getStorageSync('mobileUserId')
					}).then(res=>{
						uni.hideLoading();
						if(this.type==2){
							this.$tool.prePage().pass(2);
						}else{
							this.$tool.prePage().pass();
						}
						this.$tool.goBack();
						
					}).catch(err=>{
						uni.hideLoading();
						this.passArr = ['', '', '', '', '', ''];
						this.passIndex = 0;
					})
				}
				this.$forceUpdate();
			},
			// this.passArr.join('');
		}
	}
</script>

<style scoped lang="scss">
	.h176 {
		height: 176rpx;
	}

	.h198 {
		height: 198rpx;
	}

	.light-wrap {
		background: #FFF;
		min-height: 100vh;
	}

	.p-sticky-light {
		position: sticky;
		top: 0;
		z-index: 3;
		background: #FFF;
	}

	.topIcon {
		padding-top: 52rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.title {
		font-size: 36rpx;
		color: #F7F7F7;
	}

	.titleLight {
		color: #0E0F11;
	}

	.passWrap {
		width: 414rpx;
		margin: 0 168rpx;

		.empty {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			border: 2rpx solid #AAACB8;
		}

		.unEmpty {
			border: 2rpx solid #F7F7F7;

			view {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: #F7F7F7;
			}
		}
	}

	.passWrapLight {
		.empty {
			border: 2rpx solid #AAACB8;
		}

		.unEmpty {
			border: 2rpx solid #0E0F11;

			view {
				background: #0E0F11;
			}
		}
	}

	.inputWrap {
		width: 544rpx;
		margin: 0 103rpx;

		.num {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			border: 2rpx solid #5951BA;
			font-size: 64rpx;
			color: #F7F7F7;
			text-align: center;
			line-height: 120rpx;
			margin-bottom: 48rpx;
		}

		.nums {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			border-color: transparent;
			font-size: 64rpx;
			color: #F7F7F7;
			text-align: center;
			line-height: 120rpx;
			margin-bottom: 48rpx;
		}

		.mb-0 {
			margin-bottom: 0;
		}

		.del {
			font-size: 30rpx;
			color: #F7F7F7;
		}

		.num:active {
			background: rgba(89, 81, 186, 0.5);
		}
	}

	.inputWrapLight {
		.num {
			background: #F7F7F7;
			border: 2rpx solid #F7F7F7;
			color: #5951BA;
		}

		.num2 {
			background: transparent;
			border-color: transparent;
			color: #5951BA;
		}

		.borderNO {
			border-color: transparent;
		}

		.bgNo {
			background: transparent;
		}

		.mb-0 {
			margin-bottom: 0;
		}

		.del {
			font-size: 30rpx;
			color: #5951BA;
		}

		.num:active {
			background: #5951BA;
			border: 2rpx solid #5951BA;
			color: #FFFFFF;
		}
	}
</style>